<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Customers</title>
    <%@ include file="./includes/bulma.jsp" %>
  </head>
  <body>
    <%@ include file="./includes/navbar.jsp" %>
	<section class="section">
      <div class="columns">
        <div class="column is-4-tablet is-3-desktop is-2-widescreen">
            <%@ include file="./includes/sidebar.jsp" %>      
        </div>
        <div class="column">
          <h1 class="title ">Customers</h1>

          <nav class="level">
            <div class="level-left">
              <div class="level-item">
                <p class="subtitle is-5">
                  <strong>3</strong> customers
                </p>
              </div>

              <p class="level-item">
                <a class="button is-success" href="new-customer.html">New</a>
              </p>

              <div class="level-item is-hidden-tablet-only">
                <div class="field has-addons">
                  <p class="control">
                    <input class="input" type="text" placeholder="Name, email...">
                  </p>
                  <p class="control">
                    <button class="button">
                      Search
                    </button>
                  </p>
                </div>
              </div>
            </div>

            <div class="level-right">
              <p class="level-item">
                <strong>All</strong>
              </p>
              <p class="level-item"><a>With orders</a></p>
              <p class="level-item"><a>Without orders</a></p>
            </div>
          </nav>

         <table class="table is-hoverable is-fullwidth">
          <thead>
            <tr>
              <th class="is-narrow"><input type="checkbox"></th>
              <th>Name</th>
              <th>Email</th>
              <th>Country</th>
              <th>Orders</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <th class="is-narrow"><input type="checkbox"></th>
              <th>Name</th>
              <th>Email</th>
              <th>Country</th>
              <th>Orders</th>
              <th>Actions</th>
            </tr>
          </tfoot>

          <tbody>
            <tr>
              <td><input type="checkbox"></td>
              <td>
                <a href="edit-customer.jsp">
                  <strong>John Miller</strong>
                </a>
              </td>
              <td><code>johnmiller@gmail.com</code></td>
              <td>United States</td>
              <td>
                <a href="customer-orders.html">2</a>
              </td>
              <td>
                <div class="buttons">
                  <a class="button is-small" href="edit-customer.html">Edit</a>
                  <a class="button is-small">Delete</a>
                </div>
              </td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>
                <a href="edit-customer.jsp">
                  <strong>John Miller</strong>
                </a>
              </td>
              <td><code>johnmiller@gmail.com</code></td>
              <td>United States</td>
              <td>
                <a href="customer-orders.html">2</a>
              </td>
              <td>
                <div class="buttons">
                  <a class="button is-small" href="edit-customer.html">Edit</a>
                  <a class="button is-small">Delete</a>
                </div>
              </td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>
                <a href="edit-customer.jsp">
                  <strong>John Miller</strong>
                </a>
              </td>
              <td><code>johnmiller@gmail.com</code></td>
              <td>United States</td>
              <td>
                <a href="customer-orders.html">2</a>
              </td>
              <td>
                <div class="buttons">
                  <a class="button is-small" href="edit-customer.html">Edit</a>
                  <a class="button is-small">Delete</a>
                </div>
              </td>
            </tr>
          </tbody>
         </table> 

          <nav class="pagination">
            <a class="pagination-previous">Previous</a>
            <a class="pagination-next">Next page</a>
            <ul class="pagination-list">
              <li>
                <a class="pagination-link">1</a>
              </li>
              <li>
                <span class="pagination-ellipsis">&hellip;</span>
              </li>
              <li>
                <a class="pagination-link">45</a>
              </li>
              <li>
                <a class="pagination-link is-current">46</a>
              </li>
              <li>
                <a class="pagination-link">47</a>
              </li>
              <li>
                <span class="pagination-ellipsis">&hellip;</span>
              </li>
              <li>
                <a class="pagination-link">86</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </section>
  </body>
</html>
